<!--
 * @Author: your name
 * @Date: 2021-02-20 15:56:58
 * @LastEditTime: 2021-02-20 15:57:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \demoe:\前端开发学习\hmtt\hm63-hmtt-wsh\src\views\home\my\myInfo.vue
-->
<template>
  <div class="myInfo">
    <navBar
      title="个人信息"
      path="/home/my"
      right="保存"
      @onClickRight="onClickRight"
    ></navBar>
    <!-- native触发封装组件的事件 -->
    <div class="content">
      <mycell
        title="头像"
        class="photo"
        type="img"
        :value="userInfo.photo"
        @click.native="show = true"
      ></mycell>
      <!-- 上传文件弹出框 -->
      <van-popup v-model="show" :style="{ width: '80%' }">
        <van-button block>
          <van-uploader
            max-count="1"
            :before-read="beforeRead"
            :after-read="afterRead"
            >图片上传</van-uploader
          >
        </van-button>
        <van-button block>拍照上传</van-button>
      </van-popup>
      <mycell
        title="昵称"
        class="name"
        :value="userInfo.name"
        @click.native="showPopup1"
      ></mycell>
      <mycell
        title="介绍"
        class="intro"
        :value="userInfo.intro"
        @click.native="showPopup2"
      >
      </mycell>
      <mycell
        title="性别"
        class="sex"
        :value="sex[addUserInfo.gender]"
        @click.native="showSexPopup = true"
      ></mycell>
      <mycell
        title="生日"
        class="birth"
        :value="addUserInfo.birthday"
        @click.native="showBirthPopup = true"
      ></mycell>
      <!-- 昵称弹出框 -->
      <van-popup
        v-model="showNickPopup"
        position="bottom"
        :style="{ height: '18%' }"
        class="popup"
      >
        <van-field
          v-model="inputValue"
          rows="1"
          autosize
          type="textarea"
          maxlength="10"
          placeholder="请输入昵称"
          show-word-limit
        />
        <van-button
          :disabled="disabled"
          type="info"
          size="mini"
          round
          class="comfirmButton"
          @click="comfirm1"
          >确认</van-button
        >
      </van-popup>
      <!-- 简介弹出框 -->
      <van-popup
        v-model="showInstroPopup"
        position="bottom"
        :style="{ height: '18%' }"
        class="popup"
      >
        <van-field
          v-model="InstroinputValue"
          rows="1"
          autosize
          type="textarea"
          maxlength="20"
          placeholder="请输入个性签名"
          show-word-limit
        />
        <van-button
          :disabled="disabled"
          type="info"
          size="mini"
          round
          class="comfirmButton"
          @click="comfirm2"
          >确认</van-button
        >
      </van-popup>
      <!-- 性别弹框 -->
      <van-popup
        v-model="showSexPopup"
        position="bottom"
        :style="{ height: '50%' }"
        class="popup"
      >
        <!-- 对象转数组Object.values(对象名) -->
        <van-picker
          title="请选择性别"
          show-toolbar
          :columns="Object.values(sex)"
          :default-index="addUserInfo.gender"
          @confirm="onConfirm"
          @cancel="onCancel"
        />
      </van-popup>
      <!-- 生日弹框 -->
      <van-popup
        v-model="showBirthPopup"
        position="bottom"
        :style="{ height: '50%' }"
        class="popup"
      >
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="confirmBirth"
          @cancel="cancelBirth"
        />
      </van-popup>
    </div>
  </div>
</template>
<script>
import mycell from '@/views/home/my/myCell'
import { mapState, mapActions } from 'vuex'
import { userProfile, userPhoto, editUserProfile } from '@/api/my.js'
import { ImagePreview, Dialog } from 'vant'
import moment from 'moment'
export default {
  components: {
    mycell
  },
  computed: {
    ...mapState(['userInfo'])
  },
  data () {
    return {
      addUserInfo: {},
      sex: {
        0: '男',
        1: '女'
      },
      show: false,
      showNickPopup: false,
      inputValue: '',
      InstroinputValue: '',
      disabled: false,
      showInstroPopup: false,
      showSexPopup: false,
      dataList: [],
      showBirthPopup: false,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: '',
      timeValue: ''
    }
  },
  watch: {
    inputValue (newValue) {
      if (newValue !== '' && newValue !== this.userInfo.name) {
        this.disabled = false
      } else {
        this.disabled = true
      }
    },
    InstroinputValue (newValue) {
      if (newValue !== '' && newValue !== this.userInfo.intro) {
        this.disabled = false
      } else {
        this.disabled = true
      }
    }
  },
  async mounted () {
    const res = await userProfile()
    this.addUserInfo = res.data
    document.body.style.backgroundColor = '#f5f7f9'
    this.currentDate = new Date(this.addUserInfo.birthday)
  },
  beforeDestroy () {
    document.body.style.backgroundColor = '#fff'
  },
  methods: {
    ...mapActions(['refreshUserInfo']),
    // 上传前
    beforeRead (file) {
      if (file.type !== 'image/jpeg') {
        this.$toast.fail('请上传 jpg/png 格式图片')
        return false
      }
      if (file.size / 1024 / 1024 > 2) {
        this.$toast.fail('请上传2M内的图片')
        return false
      }
      return true
    },
    // 上传后
    afterRead (file) {
      // 转化formDate
      // console.log(file)
      const _formDate = new FormData()
      _formDate.append('photo', file.file)
      // const resPhoto = await userPhoto(_formDate)
      // this.photo = resPhoto.data.photo
      this.show = false
      ImagePreview({
        images: [file.content],
        closeable: true,
        onClose: () => {
          // onClose要改成箭头函数,不然拿不到完整的this,触发不了刷新用户的函数
          // 关闭后触发头像确认弹框
          Dialog.confirm({
            message: '是否设置该图片为头像'
          })
            .then(async () => {
              await userPhoto(_formDate)
              this.$toast.success('头像设置成功')
              this.refreshUserInfo()
            })
            .catch(() => {
              // on cancel
            })
        }
      })
    },
    showPopup1 () {
      this.showNickPopup = true
      this.inputValue = this.userInfo.name
    },
    showPopup2 () {
      this.showInstroPopup = true
      this.InstroinputValue = this.userInfo.intro
    },
    async comfirm1 () {
      this.userInfo.name = this.inputValue
      await editUserProfile({ name: this.userInfo.name })
      this.showNickPopup = false
      this.$toast.success('昵称设置成功')
    },
    async comfirm2 () {
      this.userInfo.intro = this.InstroinputValue
      await editUserProfile({ intro: this.userInfo.intro })
      this.showInstroPopup = false
      this.$toast.success('介绍设置成功')
    },
    async onConfirm (value, index) {
      // 接口有问题 所以直接改模型数据啦
      // const res1 = await editUserProfile({ gender: index })
      this.addUserInfo.gender = index
      this.showSexPopup = false
      this.$toast.success('性别设置成功')
    },
    onCancel () {
      this.showSexPopup = false
    },
    async confirmBirth (value) {
      this.addUserInfo.birthday = moment(value).format('YYYY-MM-DD')
      await editUserProfile({ birthday: this.addUserInfo.birthday })
      this.showBirthPopup = false
      this.$toast.success('生日设置成功')
    },
    cancelBirth () {
      this.showBirthPopup = false
    },
    onClickRight () {
      this.$toast.success('保存成功')
    }
  }
}
</script>
<style lang="less" scoped>
.myInfo {
  .content {
    .photo,
    .name,
    .sex {
      border-bottom: 1px solid #f5f7f9;
    }
    .intro {
      margin-bottom: 5px;
    }
    .popup {
      background-color: #f4f5f6;
      padding: 10px 10px 0 10px;

      .comfirmButton {
        position: absolute;
        right: 10px;
        bottom: 10%;
        padding: 0 20px;
      }
    }
  }
}
</style>
